<template>
	<view class="message-warp flex" v-if="article.articleid"
		@click="articleTap"
	>
		<view class="message-box">
			<view class="message">{{article.articletitle}}{{article.articledetail}}</view>
			<view class="time">{{article.creattime}}</view>
		</view>
		<view class="img-box" v-if="article.articlepic">
			<image :src="article.articlepic" mode="aspectFill"></image>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'ArticleBox',
		props: {
			article: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		methods:{
			articleTap() {
				let article = this.article
				if(!article.articleurl) return
				this.$jumpPages('web',{
					title: article.articletitle,
					url: encodeURIComponent(article.articleurl)
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
.message-warp{
	position: relative;
	padding: 40rpx 30rpx;
	display: flex;
	align-items: center;
	&::after{
		content: '';
		position: absolute;
		left: 30rpx;
		right: 30rpx;
		height: 1rpx;
		background-color: #F3F3F3;
		bottom: 0;
	}
	.message-box{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 150rpx;
		flex: 1;
		.time{
			color: #bbbbbb;
			font-size: 24rpx;
		}
	}
	.message{
		color: #000000;
		font-size: 28upx;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.img-box{
		margin-left: 30rpx;
		width: 212rpx;
		height: 150rpx;
		overflow: hidden;
		border-radius: 10rpx;
		image{
			width: 212rpx;
			height: 150rpx;
		}
	}
}
</style>
